<template>
	<DtModal @register="registerModal">
		<div class="dt-dialog">
			<ECForm @register="registerForm"></ECForm>
			<DtTable @register="registerTable"></DtTable>

			<DtCurdModal></DtCurdModal>
		</div>
	</DtModal>
</template>

<script lang="ts" setup>
	import { dict, useli8 } from '@zm-pkg/core'
	import { useCurd, useForm, useModal, useSource, useTable } from '@zm-pkg/ui'

	const modalData = ref()

	const { table, form, curd } = useSource({
		baseUrl: '/api-common/',
		exportName: '列控制',
		api: {
			queryPage: {
				url: 'queryColumnPage',
				beforeFetch( params: any ) {
					params.tableId = unref(modalData)?.id
					params.tableId1 = '2222'
				}
			},
			add: {
				url: 'addColumn',
				beforeFetch( params: any ) {
					params.tableId = unref(modalData)?.id
					return false
				}
			},
			update: 'updateColumn',
			deletes: 'delColumn',
			queryById: 'queryColumnById'
		}
	})

	const [ registerForm ] = useForm({
		...form,
		labelWidth: '80px',
		schemas: [
			{ component: 'Input', label: '字段名', name: 'columnName' }
		]
	})

	// 生成增删改查
	const { DtCurdModal } = useCurd({
		...curd,
		title: '列管理',
		width: '60%',
		formProps: {
			labelWidth: 90,
			colProps: {
				span: 12
			},
			model: {
				ifDisplay: 1
			}
		},
		schemas: [
			{ t: '字段名', component: 'Input', name: 'cloumnName', label: useli8('BASE.COLUMN_CTRL.SETTING.CLOUMN_NAME') ,
                rules: [
                    { max: 100, message: useli8('BASE.COLUMN_CTRL.SETTING.CLOUMN_NAME_MSG', { num: 100 }) },
                    { required: true }
                ]
            },
            { t: '列编码', component: 'Input', name: 'cloumnCode', label: useli8('BASE.COLUMN_CTRL.SETTING.CLOUMN_CODE') ,
                rules: [
                    { max: 50, message: useli8('BASE.COLUMN_CTRL.SETTING.CLOUMN_CODE_MSG', { num: 50 }) },
                    { required: true }
                ]
            },
			{ t: '列的类型', component: 'Select', name: 'cloumnType', label: useli8('BASE.COLUMN_CTRL.SETTING.CLOUMN_TYPE') , props: { options: dict('CLOUMN_TYPE') } },
			{ t: '列的字典', component: 'Input', name: 'dictCode', label: useli8('BASE.COLUMN_CTRL.SETTING.DICT_CODE') ,
                rules: [
                    { max: 50, message: useli8('BASE.COLUMN_CTRL.SETTING.DICT_CODE_MSG', { num: 50 }) },
                ]
            },
			{ t: '英文名', component: 'Input', name: 'cloumnEngName', label: useli8('BASE.COLUMN_CTRL.SETTING.CLOUMN_ENG_NAME')  },
			{ t: '是否显示', component: 'Select', name: 'ifDisplay', label: useli8('BASE.COLUMN_CTRL.SETTING.IF_DISPLAY') , props: { options: dict('YES_NO') } },
			{ t: '水平位置', component: 'Select', name: 'textAlign', label: useli8('BASE.COLUMN_CTRL.SETTING.TEXT_ALIGN') , props: { options: dict('TEXT_ALIGN') } },
			{ t: '是否排序', component: 'Select', name: 'ifOrder', label: useli8('BASE.COLUMN_CTRL.SETTING.IF_ORDER') , props: { options: dict('YES_NO', true) } },
			{ t: '宽度', component: 'Input', name: 'width', label: useli8('BASE.COLUMN_CTRL.SETTING.WIDTH') ,
                rules: [
                    { max: 20, message: useli8('BASE.COLUMN_CTRL.SETTING.WIDTH_MSG', { num: 20 }) },
                ]
            },
            { t: '描述', component: 'InputTextArea', name: 'cloumnDesc', label: useli8('BASE.COLUMN_CTRL.SETTING.CLOUMN_DESC') ,
                colProps: {
                    span: 24
                },
                props: {
                    autoSize: { minRows: 2, maxRows: 4 },
                },
                rules: [
                    { max: 45, message: useli8('BASE.COLUMN_CTRL.SETTING.CLOUMN_DESC_MSG', { num: 45 }) },
                ]
            }
		]
	})

	const [ registerTable ] = useTable({
		...table,
		tableSetting: { fullscreen: false },
		columnCode: 'COLUMN_SETTING',
	})

	const [ registerModal ] = useModal({
		width: '70%',
		title: '视图列控制',
		footer: null
	}, data => {
		modalData.value = data
	})
</script>

<style scoped>
.dt-dialog{
	min-height: calc(100vh - 350px);
}
</style>
